<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">*资金组成:</label>
    <div class="col-xs-12 col-sm-10">
        <div class="table-responsive" style="overflow-x: hidden;">
            <dl class="fieldlist" data-name="row[remit_orders]" data-template="tpl_remit_orders"  >
                <dd class="form-inline header-box-title">
                    <ins style="width:120px">订单类型</ins>
                    <ins style="width:150px">订单选择</ins>
                    <ins style="width:80px">金额(元)</ins>
                    <ins style="width:200px">备注</ins>
                    <ins style="width:50px" class="operation-header" style="background-color: #f6f1ff !important;">操作</ins>
                </dd>
                <dd class="form-inline">
                    <a href="javascript:;" id="c-btn_add_row_remit_orders" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 添加一行</a>
                </dd>
            </dl>
        </div>
        <textarea name="row[remit_orders]" class="form-control hide" cols="30" rows="5"></textarea>
        <!--定义模板，模板语法使用Art-Template模板语法-->
        <script type="text/html" id="tpl_remit_orders">
            <dd class="form-inline">
                <select style="width: 100px" name="row[<%=name%>][<%=index%>][order_type]" class="form-control">
                    <option value="">请选择</option>
                    <option value="1" <% if(row.order_type == '1') { %>selected<% } %>>职称</option>
                    <option value="2" <% if(row.order_type == '2') { %>selected<% } %>>继续教育</option>
                    <option value="3" <% if(row.order_type == '3') { %>selected<% } %>>专利</option>
                    <option value="4" <% if(row.order_type == '4') { %>selected<% } %>>软著</option>
                    <option value="5" <% if(row.order_type == '5') { %>selected<% } %>>科研</option>
                    <option value="6" <% if(row.order_type == '6') { %>selected<% } %>>论文</option>
                    <option value="7" <% if(row.order_type == '7') { %>selected<% } %>>学历</option>
                </select>
                  
                <div style="width:150px; display:inline-block;">
                    <input type="text" style="width:100px" name="row[<%=name%>][<%=index%>][user_name]" class="form-control" value="<%=row.user_name%>" size="30" placeholder="用户姓名" readonly/>
                    <button type="button" class="btn btn-sm btn-primary btn-select-order" style="width:25px; height:34px; padding:0; margin-left:2px;" title="选择订单">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
                <input type="hidden" name="row[<%=name%>][<%=index%>][order_id]" value="<%=row.order_id%>"/>
                <input type="number" style="width:100px" name="row[<%=name%>][<%=index%>][amount]" step="0.01" class="form-control" value="<%=row.amount%>" size="30"/>
               
                <textarea style="width:200px; height:50px; resize:none;" name="row[<%=name%>][<%=index%>][remarks]" class="form-control" placeholder="请输入工作内容"><%=row.remarks%></textarea>
                <div class="btn-container" style="width:50px;">
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-trash-o"></i> 删除</span>
                    <!-- <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span> -->
                </div>
            </dd>
        </script>
    </div>
</div>

<style>
    .input-group > .msg-box.n-right{
        left: 130px;
    }
    .fieldlist{
        width: 115%;
        background:#f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .fieldlist .form-inline.header-box-title{
        background-color: #f6f1ff !important;
        border-bottom: 2px solid #ddd;
        padding: 8px 5px;
        margin: 0;
        display: flex;
        align-items: center;
    }
    .fieldlist .form-inline.header-box-title ins{
        background-color: #f6f1ff !important;
        padding: 5px;
        display: inline-block;
        font-weight: bold;
        border-right: 1px solid #ddd;
        text-align: center;
        min-height: 20px;
        line-height: 20px;
        vertical-align: middle;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .fieldlist .form-inline.header-box-title ins:last-child {
        border-right: none;
    }
 
    .fieldlist .form-inline {
        padding: 8px 5px;
        border-bottom: 1px solid #eee;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .fieldlist .form-inline:nth-child(odd){
        background-color: #f6f1ff;
    }
    .fieldlist .form-inline:nth-child(even){
        background-color: #fff;
    }
    .fieldlist .form-inline > * {
        margin-right: 5px;
        flex-shrink: 0;
    }
    .fieldlist .form-inline input,
    .fieldlist .form-inline select,
    .fieldlist .form-inline textarea {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 4px 6px;
        height: 34px;
        box-sizing: border-box;
    }
    .fieldlist .form-inline textarea {
        resize: none;
        vertical-align: top;
        height: 60px;
    }
    .table-responsive {
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow-x: auto;
    }
    .btn-remove, .btn-dragsort {
        margin: 2px;
        display: inline-block !important;
        visibility: visible !important;
        padding: 4px 8px;
        height: 26px;
        line-height: 18px;
    }
    .fieldlist .form-inline .btn-container {
        width: 50px !important;
        text-align: center;
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        min-width: 50px !important;
        visibility: visible !important;
        height: 34px;
        border: none;
        background-color: transparent;
        box-sizing: border-box;
    }
     .btn-append {
         margin: 10px 0;
     }
 </style>
